<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="官网https://cn.vuejs.org/v2/guide/。不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>用户管理</title>
</head>
<body>
<div id="app" class="container">
<!--    <div>-->
<!--        <H2>测试VUE语法</H2>-->
<!--        <p>{{ foo }}</p>-->
<!--        &lt;!&ndash; 这里的 `foo` 不会更新！ &ndash;&gt;-->
<!--        <button class="btn btn-primary" type="button" v-on:click="change">修改</button>-->
<!--        <button class="btn btn-primary" type="button" @click="message('hello vue', $event)">提示</button>-->
<!--    </div>-->
    <div style="margin-top: 2rem;">
        <H2>用户列表</H2>
        <button class="btn btn-primary search-btn" type="button" @click="list();">
            <span v-if="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            <span v-if="!loading" class="search-text">查询</span>
        </button>
        <table class="table">
            <thead>
            <tr>
                <th scope="col">主键</th>
                <th scope="col">姓名</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody id="table-body">
            <tr v-for="(user, index) in tableData" :key="index">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#saveDialog" data-bs-title="编辑" :data-bs-id="user.id" :data-bs-name="user.name">编辑</button>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#deleteDialog" data-bs-title="删除" data-bs-content="确定删除吗？" :data-bs-id="user.id">
                        删除
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
        var vm = new Vue({
            el: '#app',    // vm.$el === document.getElementById('app') // => true
            data(){
                return {
                    foo: 1,
                    loading: false,
                    tableData: [] // 保存表格数据，可vm.$data.tableData.pop()操作
                }
            },
            // 在 `methods` 对象中定义方法。也可以用 JavaScript 直接调用方法vm.greet() // => 'Hello Vue.js!'
            methods: {
                greet() {
                    console.log('Hello Vue.js!')
                },
                change: function(event) {
                    // `event` 是原生 DOM 事件
                    console.log(event)
                    // `this` 在方法里指向当前 Vue 实例
                    this.foo = 11
                },
                message(message, event){
                    // 可以用特殊变量 $event 把它传入方法，现在我们可以访问原生事件对象
                    console.log(event)
                    alert(message)
                },
                list(){
                    // `this` 指向 vm 实例
                    var that = this    // ajax中.done(function(res){})会重置this
                    that.loading = true
                    // 请求后端接口获得数据
                    $.ajax({
                        url: '/user/list',  // 如果跨域，则需要后端允许跨域访问
                        type: 'get',
                        // contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')
                        dataType: 'json',  // dataType是说明响应结果如何处理
                    /* }).done(function( res ) { // success
                        console.log(res)
                        if(200 !== res.code){
                            alert( '请求失败：' + res.msg);
                            return
                        }
                        // .done(function( res ) { this } 中 this 不是指向 vm 实例
                        console.log(that === this)
                        that.tableData = res.data   // tableData数据和表格element绑定：双向绑定 */
                    }).done( (res) => { // success
                        console.log(res)
                        if (200 !== res.code) {
                            alert('请求失败：' + res.msg);
                            return
                        }
                        // .done((res) => { this } 中 this 还是指向 vm 实例
                        debugger
                        console.log(that === this)
                        this.tableData = res.data   // tableData数据和表格element绑定：双向绑定
                    }).fail(function( jqXHR, textStatus ) {
                        alert( "Request failed: " + textStatus );
                    }).always(function() {
                        // remove loading image maybe
                        that.loading = false
                    })
                }
            }
        })
    </script>

</body>
</html>